import React, { Component } from "react";
import { formatMessage } from 'umi-plugin-react/locale';
import { Card, Row, Col, Form, Input, Tooltip, Icon, Button, message } from "antd";
import TopInfo from "@/pages/Account/accessSettings/topInfo";
import styles from "./index.less";
import { getImChannelInfo, postSaveImChannelInfo } from '@/services/robotManagement';

class ChannelSetting extends Component {
	constructor(props) {
		super(props);
		this.state = {
			infoData: null,
		};
	}

	componentDidMount() {
		if (this.props.onRef) {
			this.props.onRef(this)
		}
	}

	getInfo = async (applicationInfo) => {
		const { applicationId, form } = this.props;
		this.setState({ infoData: applicationInfo });
	}

	copy = type => {
		let text = '';
		switch (type) {
			case 'authUrlKefu':
				text = document.getElementById('authUrlKefu');
				break;
			case 'authUrlWork':
				text = document.getElementById('authUrlWork');
				break;
			case 'receiveMessageUrl':
				text = document.getElementById('receiveMessageUrl');
				break;
			case 'screenUrl':
				text = document.getElementById('screenUrl');
				break;
		}
		if (document.body.createTextRange) {
			var range = document.body.createTextRange();
			range.moveToElementText(text);
			range.select();
		} else if (window.getSelection) {
			let selection = window.getSelection();
			let range = document.createRange();
			range.selectNodeContents(text);
			selection.removeAllRanges();
			selection.addRange(range);
		}
		document.execCommand('Copy');
		message.success(formatMessage({ id: 'robotManagement.channelSetting.copySuccess' }));
	};

	open = (type) => {
		let text = document.getElementById(type).innerText;
		window.open(text);
	};

	render() {
		const { robotId, channel, applicationId } = this.props;
		const { getFieldDecorator } = this.props.form;
		const { infoData } = this.state;
		const formItemLayout = {
			labelCol: {
				xs: { span: 24 },
				sm: { span: 3 },
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 20 },
			},
		};
		const tailFormItemLayout = {
			wrapperCol: {
				xs: { span: 24, offset: 0 },
				sm: { span: 16, offset: 3 },
			},
		};

		return (
			<div className={styles.channelSet}>
				{channel == "PURE_WEB" || channel == "SYS_WEB" ? (
					<div>
						<span className={styles.title} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><img src={staticPath + '/codeScript.png'} style={{ width: '24px' }} /><span>{formatMessage({ id: 'robotManagement.channelSetting.webAccessTitle' })}</span></span>
						<TopInfo robotId={robotId} applicationId={applicationId} />
					</div>
				) : null}

				{channel == "QWX_CORP_BUILD" || channel == 'QWX_NATIVE' || channel == 'DD_CORP_BUILD' || channel == 'DD_NATIVE' || channel == 'FS_CORP_BUILD' || channel == 'FS_NATIVE' ? (
					<div>
						{channel == "QWX_CORP_BUILD" || channel == 'QWX_NATIVE' ? (
							<span className={styles.title}><img src={staticPath + '/qywx.png'} style={{ width: '24px', marginRight: 10 }} /><span>{formatMessage({ id: 'robotManagement.channelSetting.qywxAccessTitle' })}</span></span>
						) : channel == 'FS_CORP_BUILD' || channel == 'FS_NATIVE' ? (
							<span className={styles.title}><img src={staticPath + '/feishu.svg'} style={{ width: '24px', marginRight: 10 }} /><span>{formatMessage({ id: 'robotManagement.channelSetting.feishuAccessTitle' })}</span></span>
						) : (
							<span className={styles.title}><Icon type="dingding" style={{ marginRight: 10, color: '#666666', fontSize: '18px' }} /><span>{formatMessage({ id: 'robotManagement.channelSetting.dingtalkAccessTitle' })}</span></span>
						)}

						<Button type="primary" style={{ marginLeft: 10 }} onClick={() => this.props.openInfoModal(infoData)}>{formatMessage({ id: 'robotManagement.channelSetting.modify' })}</Button>
						{channel == "QWX_CORP_BUILD" || channel == 'QWX_NATIVE' ? (
							<div style={{ paddingLeft: 10, color: '#333333', fontWeight: 'bold', borderLeft: '2px solid #4B5475', lineHeight: '25px', marginBottom: 24 }}>{formatMessage({ id: 'robotManagement.channelSetting.qywxAccessDesc' })}</div>
						) : channel == 'FS_CORP_BUILD' || channel == 'FS_NATIVE' ? (
							<div style={{ paddingLeft: 10, color: '#333333', fontWeight: 'bold', borderLeft: '2px solid #4B5475', lineHeight: '25px', marginBottom: 24 }}>{formatMessage({ id: 'robotManagement.channelSetting.feishuAccessDesc' })}</div>
						) : (
							<div style={{ paddingLeft: 10, color: '#333333', fontWeight: 'bold', borderLeft: '2px solid #4B5475', lineHeight: '25px', marginBottom: 24 }}>{formatMessage({ id: 'robotManagement.channelSetting.dingtalkAccessDesc' })}</div>
						)}
						<div>{formatMessage({ id: 'robotManagement.channelSetting.customerServiceLink' })}</div>
						<div className={styles.codeBox}>
							<div className={styles.code} id={"authUrlKefu"}>{infoData ? infoData.authUrlInfo.authUrlKefu : ''}</div>
							<Button size='small' onClick={() => this.copy("authUrlKefu")} className={styles.copyButton}>复制</Button>
						</div>
						{this.props.moduleTicket ? (
							<>
								<div>{formatMessage({ id: 'robotManagement.channelSetting.ticketConfigLink' })}</div>
								<div className={styles.codeBox}>
									<div className={styles.code} id={"authUrlWork"}>{infoData ? infoData.authUrlInfo.authUrlWork : ''}</div>
									<Button size='small' onClick={() => this.copy("authUrlWork")} className={styles.copyButton}>复制</Button>
								</div>
							</>
						) : null}
					</div>
				) : null}

				{channel == "11" ? (
					<div>
						<span className={styles.title}>{formatMessage({ id: 'robotManagement.channelSetting.qywxThirdPartyTitle' })}</span>
						<div className={styles.infoTitle}>{formatMessage({ id: 'robotManagement.channelSetting.qywxThirdPartyInfo' })}</div>
						<div>
							<Form {...formItemLayout} onSubmit={this.handleSubmit}>
								<Form.Item label={<span>{formatMessage({ id: 'robotManagement.channelSetting.qywxThirdPartyName' })}</span>}>
									{getFieldDecorator("nickname")(<Input style={{ width: "50%" }} disabled />)}
								</Form.Item>
								<Form.Item label={<span>{formatMessage({ id: 'robotManagement.channelSetting.addTime' })}</span>}>
									{getFieldDecorator("corpid")(<Input style={{ width: "50%" }} disabled />)}
								</Form.Item>

								<div style={{ color: "#B4B9C6" }}>
									<p>
										<Icon type='question-circle' style={{ marginRight: 10 }} />
										{formatMessage({ id: 'robotManagement.channelSetting.qywxThirdPartyHelp' })}
									</p>
								</div>
							</Form>
						</div>
					</div>
				) : null}

				{channel == "DIGITAL_SCREEN" ? (
					<div>
						<span className={styles.title} style={{ width: 185 }}><Icon type="fund" style={{ fontSize: "22px", color: "#757575", marginRight: '10px', verticalAlign: "middle" }} /><span>{formatMessage({ id: 'robotManagement.channelSetting.digitalScreenTitle' })}</span></span>
						<div style={{ paddingLeft: 10, color: '#333333', fontWeight: 'bold', borderLeft: '2px solid #4B5475', lineHeight: '25px', marginBottom: 24 }}>{formatMessage({ id: 'robotManagement.channelSetting.digitalScreenDesc' })}</div>
						<div>{formatMessage({ id: 'robotManagement.channelSetting.digitalScreenLink' })}</div>
						<div className={styles.codeBox}>
							<div className={styles.code} id={"screenUrl"}>
								{screenTerminalUrl}/web?applicationId={applicationId}
							</div>
							<Button size='small' onClick={() => this.open("screenUrl")} className={styles.copyButton}>{formatMessage({ id: 'robotManagement.channelSetting.openButton' })}</Button>
							<Button size='small' onClick={() => this.copy("screenUrl")} className={styles.copyButton}>复制</Button>
						</div>
					</div>
				) : null}
			</div>
		);
	}
}

export default Form.create()(ChannelSetting);
